<template>
	<view class="pages inspection-list">
		<view class="inspection-content">
			<view class="inspection-list-wrap">
				<!-- 头部 -->
				<view class="top-content-wrap">
					<view class="top-switch-wrap">
						<view class="check-switch">仅看已检查</view>
						<switch @click="hasChecked=!hasChecked"></switch>
					</view>
					<view class="top-total-wrap">
						<text class="checked-text">{{alreadyNum}}</text>
						<text class="total-text">{{totalNum}}</text>
					</view>
				</view>
				<!-- 内容 -->
				<view class="content-list-wrap">
					<view class="check-item-wrap">
						<!-- 未检查 -->
						<view class="check-li-item" v-for="item in unchecked">
							<checkbox-group @change="changeDayInspectFlag(item,'1')" class="check-ul-wrap" v-if="!hasChecked">
								<view class="checkbox-wrap">
									<checkbox  class="custom-checkbox-style" :disabled="controlBol" :checked='item.dayInspectFlag' >
									</checkbox>
								</view>
								<view class="checkbox-content-wrap" @click="toDetails(item,false)">
									<view class="order-wrap">{{item.order}}.&nbsp;</view>
									<view class="inspection-content">{{item.inspectContent}}</view>
								</view>
							</checkbox-group>
						</view>
						<!-- 已检查 -->
						<view class="checked-title" v-if="checked && checked.length > 0">已检查</view>

						<view class="check-li-item" v-for="item in checked">
							<checkbox-group @change="changeDayInspectFlag(item,'0')" class="check-ul-wrap checked-wrap" v-if="checked && checked.length > 0">
								<view class="checkbox-wrap">
									<checkbox class="custom-checkbox-style" :disabled="controlBol" :checked="item.dayInspectFlag">
									</checkbox>
								</view>
								<view class="right-wrap" @click="toDetails(item,true)">
									<view class="right-content">
										<view class="order-wrap">{{item.order}}.</view>
										<view class="inspection-content">{{item.inspectContent}}</view>
									</view>
									<view>
										<text>{{item.modifier}}</text>
										<text>{{item.modifyTime}}&emsp;提交</text>
									</view>
								</view>
							</checkbox-group>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasChecked: false,
				bol:true
			}
		},
		props: {
			type: { // 是否可以编辑
				type: String,
				default: 'editable'
			},
			isDisabled: { // 是否禁用checkbox勾选切换
				type: Boolean,
				default: false
			},
			unchecked: { // unchecked List
				type: Array,
				default: () => []
			},
			checked: { // checked List
				type: Array,
				default: () => []
			},
			alreadyNum: { // 已检查数量
				type: Number,
				default: 0
			},
			totalNum: { // 检查总数
				type: Number,
				default: 0
			},
			controlBol: { 
				type: Boolean,
				default: true
			}
		},
		components: {
			// [Switch.name]: Switch,
			// [Checkbox.name]: Checkbox
		},
		created() {
			setTimeout(() => {
				console.log(this.unchecked)
				console.log(this.checked)
			}, 5000)
			
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curParam = routes[routes.length - 1].options; //获取路由参数     //   {"userId":"1000007"}
			this.bol = curParam.bol
		},
		methods: {
			/**
			 * @description: checkbox勾选 切换检查状态
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-11-15 9:48
			 * @param: item 当前checkbox被切换的整个对象
			 * @return:
			 */
			changeDayInspectFlag(item, num) {
				item.dayInspectFlag = num
				this.commonFunc(item)
			},
			/**
			 * @description: 切换检查标识
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-11-15 10:18
			 * @param: item 需要更新的对象
			 */
			commonFunc(item) {
				let params = {
					'dayInspectFlag': item.dayInspectFlag,
					'fileId': item.fileId,
					'inspectItemId': item.inspectItemId,
					'remark': item.remark
				}
				let tipsText = item.dayInspectFlag === 1 ? '检查成功' : '取消检查'
				this.$request.ygstInspectMenuItemUpdate(params).then(res => {
					// this.$toast({
					// 	message: tipsText,
					// 	position: 'top'
					// })
					this.$emit('refresh',false)
					
				})
			},
			/**
			 * @description: 清单记录详情
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-11-15 11:05
			 * @param: item 当前点击的对象
			 */
			toDetails(item, boolean) {
				console.log('inspectionInfo---------------------------------------------------------------------------------',boolean)
				let num;
				if(boolean){
					num='1' 
				}else{
					num='0'
				}
				let str =JSON.stringify({
					dayInspectFlag: num,
					fileId: item.fileId,
					inspectItemId: item.inspectItemId,
					remark: item.remark,
					order: item.order,
					inspectContent: item.inspectContent
				})
				console.log(str)
				uni.setStorage({key:'inspectionInfo',data:str})
				let routerName = this.type === 'editable' ? 'dailyInspectionDetails' : 'inspectionDetails'
				uni.navigateTo({
					url: `../../pages/dailyInspectionList/${routerName}/${routerName}?bol=${this.bol}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inspection-list {
		.inspection-content {
			.inspection-list-wrap {
				width: 100%;

				.top-content-wrap {
					padding: 22px 12px 8px 12px;
					background-color: #fff;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.top-switch-wrap {
						display: flex;
						align-items: center;

						.check-switch {
							padding-right: 1rem;
						}

						.mint-switch-input:checked+.mint-switch-core {
							border-color: #44D696 !important;
							background-color: #44D696 !important;
						}
					}

					.top-total-wrap {
						font-size: 0;

						.checked-text {
							font-size: 58rpx;
							color: #44D696;
						}

						.total-text {
							font-size: 46rpx;
							color: #E2E2E2;

							&:before {
								content: '/'
							}
						}
					}
				}

				.content-list-wrap {
					.check-item-wrap {

						/** 修改checkbox的样式 **/
						.check-li-item {
							box-sizing: border-box;
							padding: 10px 0px;
							display: flex;
							justify-content: flex-start;
							color: #706F6F;

							.check-ul-wrap {
								padding: 12px;
								background-color: #fff;
								display: flex;

								.checkbox-wrap {
									.custom-checkbox-style {

										.el-checkbox__input .el-checkbox__inner,
										.el-checkbox__input.is-checked .el-checkbox__inner {
											width: 18px;
											height: 18px;
											background-color: #F7F9F7;
											border-color: #44D696;
											border-radius: 4px;
										}

										text.el-checkbox__inner::after {
											border-color: #44D696;
											border-width: 2px;
											left: 6px !important;
											height: 10px !important;
										}

										input[disabled="disabled"] {
											opacity: .3;
										}
									}
								}

								.checkbox-content-wrap {
									box-sizing: border-box;
									padding: 0px 8px;
									display: flex;
									justify-content: flex-start;
								}

								.right-wrap {
									padding: 0px 8px;

									.right-content {
										font-size: 28rpx;
										display: flex;
										justify-content: flex-start;
										align-items: center;

										.order-wrap {
											align-self: flex-start;
										}
									}
								}
							}
						}

						.checked-wrap {
							background-color: #F7F9F7;

							.custom-checkbox-style {

								.el-checkbox__input .el-checkbox__inner,
								.el-checkbox__input.is-checked .el-checkbox__inner {
									width: 18px;
									height: 18px;
									background-color: #F4F4F4;
									border-color: #F4F4F4;
									border-radius: 4px;
								}

								text.el-checkbox__inner::after {
									border-color: #F4F4F4;
									border-width: 2px;
									left: 6px !important;
									height: 10px !important;
								}

								input[disabled="disabled"] {
									opacity: .3;
								}
							}
						}

						.checked-title {
							padding: 12px;
							background-color: #D3D3D3;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
